<template>
  <div class="make-course-chapter-build">
    <div class="build-container">
      <div class="build-left">
        <div class="chapter-select">
          <el-select v-model="selectedChapter" placeholder="选择章节">
            <el-option
              v-for="item in chapterOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>

        <div class="section-container">
          <div class="section-header">
            <div class="section-title">知识库</div>
            <div class="section-actions"></div>
          </div>
          <div class="section-content">
            <div
              class="knowledge-item"
              @mouseenter="showEdit = true"
              @mouseleave="showEdit = false"
            >
              <i class="el-icon-document"></i>
              <span class="item-text">图像处理算法详解</span>
              <span class="item-tag" v-show="showEdit"
                ><el-icon><Edit /></el-icon> 修改</span
              >
            </div>
          </div>
        </div>

        <div class="section-container">
          <div class="section-header">
            <div class="section-title">多模态资源库</div>
            <div class="section-actions"></div>
          </div>
          <div class="section-content">
            <div
              class="resource-item"
              @mouseenter="showDel = true"
              @mouseleave="showDel = false"
            >
              <i class="el-icon-document"></i>
              <span class="item-text">《图像工程》教材.pdf</span>
              <span class="item-tag" v-show="showDel"
                ><el-icon><Close /></el-icon> 删除</span
              >
            </div>
            <div
              class="resource-item"
              @mouseenter="showDel = true"
              @mouseleave="showDel = false"
            >
              <i class="el-icon-document"></i>
              <span class="item-text">《图像工程》教材.pdf</span>
              <span class="item-tag" v-show="showDel"
                ><el-icon><Close /></el-icon> 删除</span
              >
            </div>
            <div
              class="resource-item"
              @mouseenter="showDel = true"
              @mouseleave="showDel = false"
            >
              <i class="el-icon-document"></i>
              <span class="item-text">《图像工程》教材.pdf</span>
              <span class="item-tag" v-show="showDel"
                ><el-icon><Close /></el-icon> 删除</span
              >
            </div>
            <div
              class="resource-item"
              @mouseenter="showDel = true"
              @mouseleave="showDel = false"
            >
              <i class="el-icon-document"></i>
              <span class="item-text">《图像工程》教材.pdf</span>
              <span class="item-tag" v-show="showDel"
                ><el-icon><Close /></el-icon> 删除</span
              >
            </div>
            <div
              class="resource-item"
              @mouseenter="showDel = true"
              @mouseleave="showDel = false"
            >
              <i class="el-icon-document"></i>
              <span class="item-text">《图像工程》教材.pdf</span>
              <span class="item-tag" v-show="showDel"
                ><el-icon><Close /></el-icon> 删除</span
              >
            </div>
            <div
              class="resource-item"
              @mouseenter="showDel = true"
              @mouseleave="showDel = false"
            >
              <i class="el-icon-document"></i>
              <span class="item-text">《图像工程》教材.pdf</span>
              <span class="item-tag" v-show="showDel"
                ><el-icon><Close /></el-icon> 删除</span
              >
            </div>
            <div
              class="resource-item"
              @mouseenter="showDel = true"
              @mouseleave="showDel = false"
            >
              <i class="el-icon-document"></i>
              <span class="item-text">《图像处理与分析》书籍.doc</span>
              <span class="item-tag" v-show="showDel"
                ><el-icon><Close /></el-icon> 删除</span
              >
            </div>
            <div
              class="resource-item"
              @mouseenter="showDel = true"
              @mouseleave="showDel = false"
            >
              <i class="el-icon-document"></i>
              <span class="item-text">《数字图像处理教程》.jpg</span>
              <span class="item-tag" v-show="showDel"
                ><el-icon><Close /></el-icon> 删除</span
              >
            </div>
          </div>
        </div>

        <div class="section-container">
          <div class="section-header">
            <div class="section-title">课程题库</div>
            <div class="section-actions"></div>
          </div>
          <div class="section-content">
            <div class="question-item">
              <div class="course-list-header">
                <i class="el-icon-document"></i>
                <span>课程题库列表</span>
              </div>
              <div class="course-info">
                <el-tooltip
                  content="选择:10道&nbsp;&nbsp;&nbsp;判断:10道&nbsp;&nbsp;&nbsp;简答:5道&nbsp;&nbsp;&nbsp;分析:5道"
                  placement="top"
                >
                  <span class="courseNum">显示数量 30个</span>
                </el-tooltip>
                <span
                  class="detail-btn"
                  @click="
                    $router.push(
                      '/aiTeaching/courseBuild/makeCourseChapterBuildQuestion'
                    )
                  "
                  ><i class="iconfont icon-liebiao2"></i> 详情</span
                >
              </div>
            </div>
          </div>
        </div>

        <div class="section-container">
          <div class="section-header">
            <div class="section-title">数字人设置</div>
            <div class="section-actions"></div>
          </div>
          <div class="section-content">
            <div
              class="shuziren-item"
              @mouseenter="showShuzirenEdit = true"
              @mouseleave="showShuzirenEdit = false"
            >
              <div class="course-list-header">
                <i class="el-icon-document"></i>
                <span>数字人小电（默认）</span>
              </div>
              <div class="course-info" v-show="showShuzirenEdit">
                <span class="edit-btn"
                  ><el-icon><Edit /></el-icon> 修改</span
                >
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="build-right">
        <el-button type="primary" color="#155EEF" @click="testModel()"
          >预览页面效果</el-button
        >
        <div>
          <div class="select-shuziren">
            <label>选择数字人</label>
            <el-select v-model="selectedShuziren">
              <el-option
                v-for="item in shuzirenOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
          <div class="save-btn">
            <el-button type="primary" color="#155EEF" @click="saveShuziren()"
              >保存</el-button
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import commonChat from "@/components/commonChat.vue";
export default {
  name: "make_courseChapterBuild",
  data() {
    return {
      showEdit: false,
      showDel: false,
      showShuzirenEdit: false,
      selectedChapter: "1",
      selectedShuziren: "1",
      chapterOptions: [
        {
          value: "1",
          label: "章节1 回像工程基础与概述",
        },
        {
          value: "2",
          label: "章节2 数字图像处理基础",
        },
        {
          value: "3",
          label: "章节3 图像增强与恢复",
        },
      ],
      shuzirenOptions: [
        {
          value: "1",
          label: "数字人小电（默认）",
        },
        {
          value: "2",
          label: "数字人小明",
        },
        {
          value: "3",
          label: "数字人小红",
        },
      ],
    };
  },
  components: {
    commonChat,
  },
};
</script>

<style lang="scss" scoped>
.make-course-chapter-build {
  background-color: #fff;
  box-sizing: border-box;
  overflow-x: hidden;
  height: calc(100vh - 270px);
  .build-container {
    display: flex;
    justify-content: center;
    width: 100%;
    .build-left {
      width: 60%;
      background: #fbfcff;
      padding: 20px;
      height: 100%;
      overflow-y: auto;
      box-sizing: border-box;
      &::-webkit-scrollbar {
        width: 5px;
      }
      &::-webkit-scrollbar-thumb {
        background-color: #e8ecf7;
        border-radius: 4px;
      }
      &::-webkit-scrollbar-track {
        background-color: #fbfcff;
      }
      .chapter-select {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 15px;
        margin-bottom: 20px;

        .el-select {
          width: 100%;
          margin-right: 10px;

          .el-input__inner {
            border-radius: 6px;
            height: 45px;
            font-size: 16px;
            font-weight: 500;
          }
        }
      }

      .section-container {
        border-radius: 6px;
        margin-bottom: 20px;

        .section-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 12px 15px 0;

          .section-title {
            font-size: 14px;
            font-weight: 500;
            color: #596184;
          }

          .section-actions {
            display: flex;
            align-items: center;

            i {
              cursor: pointer;
              color: #1890ff;
              font-size: 16px;

              &:hover {
                color: #40a9ff;
              }
            }
          }
        }

        .section-content {
          padding: 15px;
          border-bottom: 1px solid #dee4ef;
          .knowledge-item,
          .resource-item,
          .question-item,
          .shuziren-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 8px 12px;
            background-color: #f1f3f8;
            border-radius: 10px;
            margin-bottom: 8px;
            &:hover {
              background-color: #e8ecf7;
            }

            .item-text {
              flex: 1;
              font-size: 16px;
              color: #140e35;
            }

            .item-tag {
              font-size: 12px;
              display: flex;
              justify-content: center;
              align-items: center;
              color: #457aff;
              cursor: pointer;

              i {
                margin-right: 3px;
                margin-top: 2px;
              }
            }

            .delete-icon {
              color: #ff4d4f;
              cursor: pointer;
            }
          }

          .course-info {
            margin-left: auto;
            font-size: 12px;
            color: #999;

            .courseNum {
              color: #7582a3;
              font-size: 14px;
              cursor: pointer;
            }

            .detail-btn {
              margin-left: 15px;
              font-size: 14px;
              color: #457aff;
              cursor: pointer;
              i {
                margin-top: 2px;
              }
            }

            .edit-btn {
              font-size: 14px;
              color: #457aff;
              cursor: pointer;
              i {
                margin-top: 2px;
              }
            }
          }
        }
      }
    }
    .build-right {
      padding: 25px;
      width: 40%;
      box-sizing: border-box;
      background-color: #f3f5fa;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 20px;

      > div {
        padding: 50px 70px 0 50px;
        width: 100%;
        height: 100%;
        background-color: #fff;
        border-radius: 10px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 33px;
        box-sizing: border-box;
        .select-shuziren {
          width: 100%;
          display: flex;
          align-items: center;
          gap: 10px;
          background-color: #fff;
          label {
            width: 120px;
            font-size: 16px;
            color: #1e2c48;
          }
        }
      }
    }
  }
}
</style>
